<template>
  <div style="padding: 15px 20px 0px 5px;background-color:#f6faff">
    <vol-form ref="form" :labelWidth="0" :load-key="true" :formFields="fields" :formRules="formOptions">
      <el-button type="primary" @click="getVehicleData">搜索</el-button>
    </vol-form>
  </div>
  <div class="pre-text">{{ text }}</div>
  <div ref="vehicleData"
    style="width:100%;overflow: auto;display:-webkit-flex;flex-direction:row;flex-wrap:nowrap;justify-content: flex-start;align-items: flex-start;">
    <div class="vehicles" style="display:inline-block;margin-left: 10px;position: relative;" v-for="che_info in che_infos"
      :key="che_info.value">
      <h6>{{ che_info.vehicleName }}</h6>
      <el-table id="vehicleTable" :show-header="false" :data="che_info.data" style="width: 100%;" row-key="id" border lazy
        :load="load" @row-click="getOpenDetail" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column prop="module" label="模块" width="180px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="description" label="描述" width="180px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="materialnum" label="物料号" width="130px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="note" label="备注" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <table id="vehicleAmount" border="1" style="width:100%;">
        <tr>
          <td colspan="2">降本金额</td>
          <td>{{ che_info.jbje }}</td>
          <td>{{ che_info.jbje_note }}</td>
        </tr>
        <tr>
          <td colspan="2">降本率</td>
          <td>{{ che_info.jbl }}</td>
          <td>{{ che_info.jbl_note }}</td>
        </tr>
        <tr>
          <td colspan="2">降本后总材料成本</td>
          <td>{{ che_info.jbhzclcb }}</td>
          <td>{{ che_info.jbhzclcb_note }}</td>
        </tr>
        <tr>
          <td colspan="2">直接人工</td>
          <td>{{ che_info.zjrg }}</td>
          <td>{{ che_info.zjrg_note }}</td>
        </tr>
        <tr>
          <td rowspan="3">变动制造</td>
          <td>变动动力费</td>
          <td>{{ che_info.bdzz_bddlf }}</td>
          <td>{{ che_info.bdzz_bddlf_note }}</td>
        </tr>
        <tr>
          <td>变动辅材</td>
          <td>{{ che_info.bdzz_bdfc }}</td>
          <td>{{ che_info.bdzz_bdfc_note }}</td>
        </tr>
        <tr>
          <td>变动维修及工费</td>
          <td>{{ che_info.bdzz_bdwxjgf }}</td>
          <td>{{ che_info.bdzz_bdwxjgf_note }}</td>
        </tr>
        <tr>
          <td rowspan="3">变动销售</td>
          <td>销售提成</td>
          <td>{{ che_info.bdxs_xstc }}</td>
          <td>{{ che_info.bdxs_xstc_note }}</td>
        </tr>
        <tr>
          <td>三包服务费</td>
          <td>{{ che_info.bdxs_sbfwf }}</td>
          <td>{{ che_info.bdxs_sbfwf_note }}</td>
        </tr>
        <tr>
          <td>物流费</td>
          <td>{{ che_info.bdxs_wlf }}</td>
          <td>{{ che_info.bdxs_wlf_note }}</td>
        </tr>
        <tr>
          <td colspan="2">税金</td>
          <td>{{ che_info.sj }}</td>
          <td>{{ che_info.sj_note }}</td>
        </tr>
        <tr>
          <td colspan="2">气瓶检测费</td>
          <td>{{ che_info.qpjcf }}</td>
          <td>{{ che_info.qpjcf_note }}</td>
        </tr>
        <tr>
          <td colspan="2">联合通</td>
          <td>{{ che_info.lht }}</td>
          <td>{{ che_info.lht_note }}</td>
        </tr>
        <tr>
          <td colspan="2">0边际成本（含税）</td>
          <td>{{ che_info.zero_bjcb_hs }}</td>
          <td>{{ che_info.zero_bjcb_hs_note }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import VolForm from '@/components/basic/VolForm';
import http from "@/api/http.js";

export default {

  components: { "vol-form": VolForm, },
  data() {
    return {
      text: "车型对比",
      tabsModel: "0",
      fields: { "vehicle_model": null, "announcement_model": null, "fuel_type": null, "pilothouse": null, "cab_suspension": null, "drive": null, "wheelbase": null, "frame": null },
      formOptions: [[{ "field": "vehicle_model", "title": "车型", "type": "select", "required": false, "readonly": false, "colSize": null, "dataKey": "整车成本_车型", "data": [] },
      { "field": "announcement_model", "title": "公告型号", "type": "select", "required": false, "readonly": false, "colSize": null, "data": [], "dataKey": "整车成本_公告型号" },
      { "field": "fuel_type", "title": "燃料类型", "type": "select", "required": false, "readonly": false, "colSize": null, "data": [], "dataKey": "整车成本_燃料类型" },
      { "field": "pilothouse", "title": "驾驶室", "type": "select", "required": false, "readonly": false, "colSize": null, "data": [], "dataKey": "整车成本_驾驶室" },
      { "field": "cab_suspension", "title": "驾驶室悬置", "type": "select", "required": false, "readonly": false, "colSize": null, "data": [], "dataKey": "整车成本_驾驶室悬置" },
      { "field": "drive", "title": "驱动", "type": "select", "required": false, "readonly": false, "colSize": null, "data": [], "dataKey": "整车成本_驱动" },
      { "field": "wheelbase", "title": "轴距", "type": "select", "required": false, "readonly": false, "colSize": null, "data": [], "dataKey": "整车成本_轴距" },
      { "field": "frame", "title": "车架", "type": "select", "required": false, "readonly": false, "colSize": null, "data": [], "dataKey": "整车成本_车架" },],],
      che_infos: [],
    };
  },
  created() {

  },
  mounted() {
    this.setVehicleDataHeight()
    window.addEventListener('resize', this.setVehicleDataHeight)
  },

  methods: {
    getVehicleData() {
      //避免从前台传到后台时，加号变成空格
      let vehicle_model = encodeURIComponent(this.fields.vehicle_model)
      let announcement_model = encodeURIComponent(this.fields.announcement_model)
      let fuel_type = encodeURIComponent(this.fields.fuel_type)
      let pilothouse = encodeURIComponent(this.fields.pilothouse)
      let cab_suspension = encodeURIComponent(this.fields.cab_suspension)
      let drive = encodeURIComponent(this.fields.drive)
      let wheelbase = encodeURIComponent(this.fields.wheelbase)
      let frame = encodeURIComponent(this.fields.frame)

      let is_vehicle_model_null = vehicle_model === "" || vehicle_model === "null"
      let is_announcement_model_null = announcement_model === "" || announcement_model === "null"
      let is_fuel_type_null = fuel_type === "" || fuel_type === "null"
      let is_pilothouse_null = pilothouse === "" || pilothouse === "null"
      let is_cab_suspension_null = cab_suspension === "" || cab_suspension === "null"
      let is_drive_null = drive === "" || drive === "null"
      let is_wheelbase_null = wheelbase === "" || wheelbase === "null"
      let is_frame_null = frame === "" || frame === "null"

      if (is_vehicle_model_null && is_announcement_model_null && is_fuel_type_null && is_pilothouse_null && is_cab_suspension_null && is_drive_null && is_wheelbase_null && is_frame_null) {
        this.$message.error("请至少输入一个条件")
        return
      }

      this.che_infos=[]
      let url = "api/yjy_whole_data_comparison/getVehicleData?vehicle_model=" + vehicle_model + "&announcement_model=" + announcement_model + "&fuel_type=" + fuel_type + "&pilothouse=" + pilothouse + "&cab_suspension=" + cab_suspension + "&drive=" + drive + "&wheelbase=" + wheelbase + "&frame=" + frame
      http.post(url, {}, true).then((s) => {
        s.forEach(e => {
          this.che_infos.push({ value: e.value, vehicleName: e.vehicleName, data: e.data })
        })
        if(this.che_infos.length===0){
          this.$message.error("未找到匹配车型")
        }
      })
    },

    setVehicleDataHeight() {
      const screenHeight = window.innerHeight
      this.$refs.vehicleData.style.height = screenHeight - 245 + 'px'
    },

    load(tree, treeNode, resolve) {
      let url = "api/yjy_whole_data_comparison/getChildrenDatas?parent=" + tree.materialnum + "&materialnum=" + tree.vehicle_materialnum + "&tree_id=" + tree.tree_id
      http.post(url, {}, true).then((s) => {
        setTimeout(() => {
          resolve(s)
        }, 200)
      })
      console.log("tree:", tree)
      console.log("treeNode:", treeNode)
    },

    getOpenDetail(row, column, event) {
      if (row.hasChildren) {
        if (event.currentTarget.querySelector(".el-table__expand-icon")) {
          event.currentTarget.querySelector(".el-table__expand-icon").click()
        }
      }
    }
  }
};

VolForm;
</script>
<style lang="less" scoped>
.pre-text {
  font-weight: bolder;
  width: 85px;
  padding: 10px 10px;
  margin-bottom: 5px;
  border-bottom: 2px solid black;
}

.vehicles {
  padding: 3px;
  border: 1px solid rgb(223, 220, 220);


  table {
    border-spacing: 0px;
    border: 1px dashed #EBEEF5;
    border-top: 5px solid;
    font: 14px;
    background-color: #aaa;
    // position: absolute;
    // top: auto;
    // bottom: 0;

    td {
      border: 1px dashed #ABC;

    }
  }
}

.form-btns {
  text-align: center;
}

.tables {
  padding-left: 15px;

  .table-item {
    padding: 10px;
  }

  .table-header {
    display: flex;
    margin-bottom: 8px;
  }

  .header-text {
    position: relative;
    bottom: -9px;
    flex: 1;
    font-weight: bold;
  }

  .header-btns {
    text-align: right;
  }
}
</style>